<!-- Guided Generations Settings Panel -->
<div class="GuidedGenerations-Extension-settingslist">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>Guided Generations Settings</b>
			<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>
        <div class="inline-drawer-content">
            <div class="settings_section">
                <h4>Show Action Buttons</h4> <!-- Heading for Impersonate/Action Buttons -->
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showImpersonate1stPerson" name="showImpersonate1stPerson" class="gg-setting-input">
                        <label for="gg_showImpersonate1stPerson" style="margin-left: 8px;">Show Impersonate (1st Person)</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showImpersonate2ndPerson" name="showImpersonate2ndPerson" class="gg-setting-input">
                        <label for="gg_showImpersonate2ndPerson" style="margin-left: 8px;">Show Impersonate (2nd Person)</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showImpersonate3rdPerson" name="showImpersonate3rdPerson" class="gg-setting-input">
                        <label for="gg_showImpersonate3rdPerson" style="margin-left: 8px;">Show Impersonate (3rd Person)</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showGuidedContinue" name="showGuidedContinue" class="gg-setting-input">
                        <label for="gg_showGuidedContinue" style="margin-left: 8px;">Show Guided Continue</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showGuidedResponse" name="showGuidedResponse" class="gg-setting-input">
                        <label for="gg_showGuidedResponse" style="margin-left: 8px;">Show Guided Response</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showGuidedSwipe" name="showGuidedSwipe" class="gg-setting-input">
                        <label for="gg_showGuidedSwipe" style="margin-left: 8px;">Show Guided Swipe</label>
                    </div>
                </div>
                <hr>
                <h4>Show Tool Buttons</h4>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showSimpleSendButton" name="showSimpleSendButton" class="gg-setting-input">
                        <label for="gg_showSimpleSendButton" style="margin-left: 8px;">Show Simple Send Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showRecoverInputButton" name="showRecoverInputButton" class="gg-setting-input">
                        <label for="gg_showRecoverInputButton" style="margin-left: 8px;">Show Recover Input Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showEditIntrosButton" name="showEditIntrosButton" class="gg-setting-input">
                        <label for="gg_showEditIntrosButton" style="margin-left: 8px;">Show Edit Intros Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showCorrectionsButton" name="showCorrectionsButton" class="gg-setting-input">
                        <label for="gg_showCorrectionsButton" style="margin-left: 8px;">Show Corrections Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showSpellcheckerButton" name="showSpellcheckerButton" class="gg-setting-input">
                        <label for="gg_showSpellcheckerButton" style="margin-left: 8px;">Show Spellchecker Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showClearInputButton" name="showClearInputButton" class="gg-setting-input">
                        <label for="gg_showClearInputButton" style="margin-left: 8px;">Show Clear Input Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showUndoButton" name="showUndoButton" class="gg-setting-input">
                        <label for="gg_showUndoButton" style="margin-left: 8px;">Show Undo Last Addition Button</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_showRevertButton" name="showRevertButton" class="gg-setting-input">
                        <label for="gg_showRevertButton" style="margin-left: 8px;">Show Revert to Original Button</label>
                    </div>
                </div>
                <hr>
                <h4>UI Preferences</h4>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_integrateQrBar" name="integrateQrBar" class="gg-setting-input">
                        <label for="gg_integrateQrBar" style="margin-left: 8px;">Integrate QR Bar into GG Button Area</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_debugMode" name="debugMode" class="gg-setting-input">
                        <label for="gg_debugMode" style="margin-left: 8px;">Enable Debug Logging</label>
                    </div>
                    <small class="setting_item_description">
                        When enabled, shows detailed debug information in the browser console and captures it for mobile access. Useful for troubleshooting but can clutter the console during normal use. Debug messages are automatically captured and can be copied or downloaded.
                    </small>
                    <div style="margin-top: 8px; display: flex; gap: 8px;">
                        <button type="button" id="gg_copyDebugLogs" class="btn btn-secondary" style="font-size: 12px; padding: 4px 8px;">
                            <i class="fa-solid fa-copy"></i> Copy Debug Logs
                        </button>
                        <button type="button" id="gg_downloadDebugLogs" class="btn btn-secondary" style="font-size: 12px; padding: 4px 8px;">
                            <i class="fa-solid fa-download"></i> Download as TXT
                        </button>
                        <button type="button" id="gg_clearDebugLogs" class="btn btn-secondary" style="font-size: 12px; padding: 4px 8px;">
                            <i class="fa-solid fa-trash"></i> Clear Logs
                        </button>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_persistentGuidesInChatlog" name="persistentGuidesInChatlog" class="gg-setting-input">
                        <label for="gg_persistentGuidesInChatlog" style="margin-left: 8px;">Persistent Guides in Chatlog</label>
                    </div>
                    <small class="setting_item_description">
                        When enabled, Persistent Guides will be visible in the Chatlog but will not be sent to the LLM. Only the invisible injections are sent to the LLM.
                    </small>
                </div>
                <hr>
                <h4>Auto-Triggers (Persistent Guides)</h4> <!-- Heading for Auto-Triggers -->
                <small class="setting_item_description">
                    Auto Triggered Guides automatically run when you use a the vanilla Send command from ST and on Guided Response before the Response is being generated. They do not run on swipes (where it is expected that they have already run on the initial response and are current).
                </small>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_autoTriggerClothes" name="autoTriggerClothes" class="gg-setting-input">
                        <label for="gg_autoTriggerClothes" style="margin-left: 8px;">Describe Clothes</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_autoTriggerState" name="autoTriggerState" class="gg-setting-input">
                        <label for="gg_autoTriggerState" style="margin-left: 8px;">Describe State</label>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_autoTriggerThinking" name="autoTriggerThinking" class="gg-setting-input">
                        <label for="gg_autoTriggerThinking" style="margin-left: 8px;">Describe Thinking</label>
                    </div>
                </div>
                <!-- Custom Auto Guide Auto Trigger -->
                <div class="setting_item">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <input type="checkbox" id="gg_enableAutoCustomAutoGuide" name="enableAutoCustomAutoGuide" class="gg-setting-input" title="Trigger this guide automatically before each outgoing message">
                        <label for="gg_enableAutoCustomAutoGuide" style="margin-left: 8px;">Custom Auto Guide</label>
                    </div>
                </div>
                <hr>
                <h4>Injection Settings</h4> <!-- New Heading -->
                <div class="setting_item"> <!-- Container for the new setting -->
                    <label for="gg_injectionEndRole" style="margin-bottom: 5px; display: block;">Send Injections as:</label> <!-- Label for the dropdown -->
                    <select id="gg_injectionEndRole" name="injectionEndRole" class="gg-setting-input text_pole select_compact"> <!-- Dropdown -->
                        <option value="system">System</option>
                        <option value="assistant">Assistant</option>
                        <option value="user">User</option>
                    </select>
                    <small class="setting_item_description"> <!-- Description -->
                        Determines the role assigned to the end of injected content (like Describe State/Clothes) before generation. 'System' is often best for guidance, 'Assistant' continues the flow, 'User' can sometimes be useful depending on the model/prompt structure. Default: System.
                    </small>
                </div>
                <hr>
                <h4>Preset Usage</h4>
                                <small class="setting_item_description">Assign specific System Prompts (Presets) to different Guided Generation actions. When a preset is selected, it will be temporarily activated just before the guide runs, then deactivated. Use the 'GGSystemPrompt' button to quickly fill the field with the default guidance preset.</small>
                
                <!-- Profile System Controls -->
                <div class="setting_item" style="margin-bottom: 20px;">
                    <button id="refreshProfileDropdowns" type="button" class="btn btn-secondary" style="margin-right: 10px;">
                        Refresh Profile Dropdowns
                    </button>
                    <span id="profileDebugStatus" style="font-style: italic; color: var(--SmartThemeBodyColor); opacity: 0.6;"></span>
                </div>
                
                <!-- Safety Timeout Settings -->
                <div class="setting_item">
                    <h4>Safety Timeout Settings</h4>
                    <small class="setting_item_description">
                        Configure safety delays after switching presets and profiles to ensure they have settled before proceeding. These delays help prevent issues with incomplete switches.
                    </small>
                    <div style="display: flex; align-items: center; gap: 15px; margin-top: 10px;">
                        <div style="flex: 1; min-width: 0;">
                            <label for="gg_profileSwitchTimeout" style="margin-bottom: 5px; display: block; font-weight: bold;">Profile Switch Timeout (ms):</label>
                            <input type="number" id="gg_profileSwitchTimeout" name="profileSwitchTimeout" class="gg-setting-input text_pole" min="0" max="10000" value="500" style="width: 100px;">
                            <small class="setting_item_description">Delay after profile switch (default: 500ms)</small>
                        </div>
                        <div style="flex: 1; min-width: 0;">
                            <label for="gg_presetSwitchTimeout" style="margin-bottom: 5px; display: block; font-weight: bold;">Preset Switch Timeout (ms):</label>
                            <input type="number" id="gg_presetSwitchTimeout" name="presetSwitchTimeout" class="gg-setting-input text_pole" min="0" max="10000" value="200" style="width: 100px;">
                            <small class="setting_item_description">Delay after preset switch (default: 200ms)</small>
                        </div>
                    </div>
                </div>
                <!-- Preset fields for each guide/tool -->
                <div class="setting_item">
                    <div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px;">
                        <div style="flex: 1; min-width: 0;">
                            <label for="profileClothes" style="margin-bottom: 5px; display: block; font-weight: bold;">Clothes Guide Profile:</label>
                            <select id="profileClothes" name="profileClothes" class="gg-setting-input text_pole select_compact" style="width: 100%;">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1; min-width: 0;">
                            <label for="presetClothes" style="margin-bottom: 5px; display: block; font-weight: bold;">Clothes Guide Preset:</label>
                            <select id="presetClothes" name="presetClothes" class="gg-setting-input text_pole select_compact" style="width: 100%;">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileState" style="margin-bottom: 5px; display: block;">State Guide Profile:</label>
                            <select id="profileState" name="profileState" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetState" style="margin-bottom: 5px; display: block;">State Guide Preset:</label>
                            <select id="presetState" name="presetState" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileThinking" style="margin-bottom: 5px; display: block;">Thinking Guide Profile:</label>
                            <select id="profileThinking" name="profileThinking" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetThinking" style="margin-bottom: 5px; display: block;">Thinking Guide Preset:</label>
                            <select id="presetThinking" name="presetThinking" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileCustomAuto" style="margin-bottom: 5px; display: block;">Custom Auto Guide Profile:</label>
                            <select id="profileCustomAuto" name="profileCustomAuto" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetCustomAuto" style="margin-bottom: 5px; display: block;">Custom Auto Guide Preset:</label>
                            <select id="presetCustomAuto" name="presetCustomAuto" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>

                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileSituational" style="margin-bottom: 5px; display: block;">Situational Guide Profile:</label>
                            <select id="profileSituational" name="profileSituational" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetSituational" style="margin-bottom: 5px; display: block;">Situational Guide Preset:</label>
                            <select id="presetSituational" name="presetSituational" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileRules" style="margin-bottom: 5px; display: block;">Rules Guide Profile:</label>
                            <select id="profileRules" name="profileRules" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetRules" style="margin-bottom: 5px; display: block;">Rules Guide Preset:</label>
                            <select id="presetRules" name="presetRules" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileCustom" style="margin-bottom: 5px; display: block;">Custom Guide Profile:</label>
                            <select id="profileCustom" name="profileCustom" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetCustom" style="margin-bottom: 5px; display: block;">Custom Guide Preset:</label>
                            <select id="presetCustom" name="presetCustom" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileCorrections" style="margin-bottom: 5px; display: block;">Corrections Profile:</label>
                            <select id="profileCorrections" name="profileCorrections" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetCorrections" style="margin-bottom: 5px; display: block;">Corrections Preset:</label>
                            <select id="presetCorrections" name="presetCorrections" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileSpellchecker" style="margin-bottom: 5px; display: block;">Spellchecker Profile:</label>
                            <select id="profileSpellchecker" name="profileSpellchecker" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetSpellchecker" style="margin-bottom: 5px; display: block;">Spellchecker Preset:</label>
                            <select id="presetSpellchecker" name="presetSpellchecker" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileEditIntros" style="margin-bottom: 5px; display: block;">Edit Intros Profile:</label>
                            <select id="profileEditIntros" name="profileEditIntros" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetEditIntros" style="margin-bottom: 5px; display: block;">Edit Intros Preset:</label>
                            <select id="presetEditIntros" name="presetEditIntros" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileImpersonate1st" style="margin-bottom: 5px; display: block;">Impersonate 1st Profile:</label>
                            <select id="profileImpersonate1st" name="profileImpersonate1st" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetImpersonate1st" style="margin-bottom: 5px; display: block;">Impersonate 1st Preset:</label>
                            <select id="presetImpersonate1st" name="presetImpersonate1st" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileImpersonate2nd" style="margin-bottom: 5px; display: block;">Impersonate 2nd Profile:</label>
                            <select id="profileImpersonate2nd" name="profileImpersonate2nd" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetImpersonate2nd" style="margin-bottom: 5px; display: block;">Impersonate 2nd Preset:</label>
                            <select id="presetImpersonate2nd" name="presetImpersonate2nd" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileImpersonate3rd" style="margin-bottom: 5px; display: block;">Impersonate 3rd Profile:</label>
                            <select id="profileImpersonate3rd" name="profileImpersonate3rd" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetImpersonate3rd" style="margin-bottom: 5px; display: block;">Impersonate 3rd Preset:</label>
                            <select id="presetImpersonate3rd" name="presetImpersonate3rd" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileFun" style="margin-bottom: 5px; display: block;">Fun Prompts Profile:</label>
<select id="profileFun" name="profileFun" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetFun" style="margin-bottom: 5px; display: block;">Fun Prompts Preset:</label>
                            <select id="presetFun" name="presetFun" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileTrackerDetermine" style="margin-bottom: 5px; display: block;">Stat Tracker: Determine Changes - Profile:</label>
                            <select id="profileTrackerDetermine" name="profileTrackerDetermine" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetTrackerDetermine" style="margin-bottom: 5px; display: block;">Stat Tracker: Determine Changes - Preset:</label>
                            <select id="presetTrackerDetermine" name="presetTrackerDetermine" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="setting_item">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                        <div style="flex: 1;">
                            <label for="profileTrackerUpdate" style="margin-bottom: 5px; display: block;">Stat Tracker: Update with Changes - Profile:</label>
                            <select id="profileTrackerUpdate" name="profileTrackerUpdate" class="gg-setting-input text_pole select_compact">
                                <option value="">None</option>
                                <!-- Profile options will be populated by the extension -->
                            </select>
                        </div>
                        <div style="flex: 1;">
                            <label for="presetTrackerUpdate" style="margin-bottom: 5px; display: block;">Stat Tracker: Update with Changes - Preset:</label>
                            <select id="presetTrackerUpdate" name="presetTrackerUpdate" class="gg-setting-input text_pole select_compact">
                                <!-- Preset options will be populated by the extension -->
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="guide-prompt-overrides-section"> <!-- Added wrapper -->
                    <h4>Guide Prompt Overrides</h4>
                    <small class="setting_item_description">Customize the instructions sent to the AI for specific guides. Use `&#123;&#123;input&#125;&#125;` where you want the original user text to be inserted (if applicable). Use the 'Default' button to restore the original prompt. Check 'Raw' to send the prompt directly as an STScript command instead of injecting it (advanced use).</small>
                    <!-- Textareas for overriding default guide prompts -->
                    <div class="setting_item">
                        <label for="gg_promptClothes" style="margin-left: 8px; min-width:150px; display:block;">Clothes Guide Prompt</label>
                        <textarea id="gg_promptClothes" name="promptClothes" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptClothes" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptClothes" name="rawPromptClothes" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptClothes" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptClothes" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptClothes" name="depthPromptClothes" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptState" style="margin-left: 8px; min-width:150px; display:block;">State Guide Prompt</label>
                        <textarea id="gg_promptState" name="promptState" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptState" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptState" name="rawPromptState" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptState" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptState" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptState" name="depthPromptState" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptThinking" style="margin-left: 8px; min-width:150px; display:block;">Thinking Guide Prompt</label>
                        <textarea id="gg_promptThinking" name="promptThinking" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptThinking" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptThinking" name="rawPromptThinking" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptThinking" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptThinking" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptThinking" name="depthPromptThinking" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_customAutoGuidePrompt" style="margin-left: 8px; min-width:150px; display:block;">Custom Auto Guide Prompt</label>
                        <textarea id="gg_customAutoGuidePrompt" name="customAutoGuidePrompt" class="gg-setting-input text_pole" rows="3" placeholder="Enter custom prompt here... (leave empty to disable override)" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="customAutoGuidePrompt" style="margin-top:4px;">Default (Empty)</button>
                            <input type="checkbox" id="gg_rawPromptCustomAuto" name="rawPromptCustomAuto" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptCustomAuto" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptCustomAuto" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptCustomAuto" name="depthPromptCustomAuto" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptSituational" style="margin-left: 8px; min-width:150px; display:block;">Situational Guide Prompt</label>
                        <textarea id="gg_promptSituational" name="promptSituational" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptSituational" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptSituational" name="rawPromptSituational" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptSituational" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptSituational" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptSituational" name="depthPromptSituational" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptRules" style="margin-left: 8px; min-width:150px; display:block;">Rules Guide Prompt</label>
                        <textarea id="gg_promptRules" name="promptRules" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptRules" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptRules" name="rawPromptRules" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptRules" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptRules" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptRules" name="depthPromptRules" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptCorrections" style="margin-left: 8px; min-width:150px; display:block;">Corrections Prompt</label>
                        <textarea id="gg_promptCorrections" name="promptCorrections" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptCorrections" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptCorrections" name="rawPromptCorrections" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptCorrections" style="margin-left:4px;">Raw</label>
                            <label for="gg_depthPromptCorrections" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptCorrections" name="depthPromptCorrections" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptSpellchecker" style="margin-left: 8px; min-width:150px; display:block;">Spellchecker Prompt</label>
                        <textarea id="gg_promptSpellchecker" name="promptSpellchecker" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <div style="display: flex; align-items: center; margin-top: 4px;">
                            <button type="button" class="gg-default-button" data-target="promptSpellchecker" style="margin-top:4px;">Default</button>
                            <input type="checkbox" id="gg_rawPromptSpellchecker" name="rawPromptSpellchecker" class="gg-setting-input" style="margin-left:8px;">
                            <label for="gg_rawPromptSpellchecker" style="margin-left:4px;">Raw</label>
                        </div>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptImpersonate1st" style="margin-left: 8px; min-width:150px; display:block;">Impersonate 1st Person Prompt</label>
                        <textarea id="gg_promptImpersonate1st" name="promptImpersonate1st" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptImpersonate1st" style="margin-top:4px;">Default</button>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptImpersonate2nd" style="margin-left: 8px; min-width:150px; display:block;">Impersonate 2nd Person Prompt</label>
                        <textarea id="gg_promptImpersonate2nd" name="promptImpersonate2nd" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptImpersonate2nd" style="margin-top:4px;">Default</button>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptImpersonate3rd" style="margin-left: 8px; min-width:150px; display:block;">Impersonate 3rd Person Prompt</label>
                        <textarea id="gg_promptImpersonate3rd" name="promptImpersonate3rd" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptImpersonate3rd" style="margin-top:4px;">Default</button>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptGuidedContinue" style="margin-left: 8px; min-width:150px; display:block;">Guided Continue Prompt</label>
                        <textarea id="gg_promptGuidedContinue" name="promptGuidedContinue" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptGuidedContinue" style="margin-top:4px;">Default</button>
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptGuidedResponse" style="margin-left: 8px; min-width:150px; display:block;">Guided Response Prompt</label>
                        <textarea id="gg_promptGuidedResponse" name="promptGuidedResponse" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptGuidedResponse" style="margin-top:4px;">Default</button>
                            <label for="gg_depthPromptGuidedResponse" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptGuidedResponse" name="depthPromptGuidedResponse" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                    </div>
                    <div class="setting_item">
                        <label for="gg_promptGuidedSwipe" style="margin-left: 8px; min-width:150px; display:block;">Guided Swipe Prompt</label>
                        <textarea id="gg_promptGuidedSwipe" name="promptGuidedSwipe" class="gg-setting-input text_pole" rows="3" style="width:100%; margin-left:8px; min-width:200px;"></textarea>
                        <button type="button" class="gg-default-button" data-target="promptGuidedSwipe" style="margin-top:4px;">Default</button>
                            <label for="gg_depthPromptGuidedSwipe" style="margin-left:8px;">Depth:</label>
                            <input type="number" id="gg_depthPromptGuidedSwipe" name="depthPromptGuidedSwipe" class="gg-setting-input" min="0" style="width: 50px; margin-left:4px;">
                    </div>
                </div> <!-- Added closing wrapper tag -->
            </div>
        </div>
    </div>
</div>
